﻿/* 
 * FluffyCloud - MetroInspired theme - gray
 * (c) Michal Altair Valášek - Altairis, 2012
 */

// First, we define variables, so we don't repeat all the time
$ForeColor: #000;										// Basic foreground color (black)
$BackColor: #fff;										// Basic background color (white)
$AccentColor: #525252;									// Accent color, used for headings and such (gray)
$ComplementaryColor: #970000;							// Complementary color, used mainly for errors and warnings (red)
$HoverColor: #ffc;										// Subtle hover effect color (light yellow)
$MaxWidth: 1200px;										// Maximum body width
$ModuleWidth: 150px;									// Icon/module width, from which some other proportions are derived
$Padding: 25px;											// Default margin/padding
$DefaultFont: Segoe UI, Arial, Helvetica, sans-serif;	// Font used trough the site
$HeaderFont: Segoe UI Light, $DefaultFont;				// Font used for headings (H1-H6)

// Universal mixin for gradients - $to is direction
@mixin AccentGradient($to: $right) {
	$from: null;
	@if $to == left { $from: right; }
	@if $to == right { $from: left; }
	@if $to == top { $from: bottom; }
	@if $to == bottom { $from: top; }

	background-color: lighten($AccentColor, 35);
	background-image: -ms-linear-gradient($from, lighten($AccentColor, 35) 0, $BackColor 100%);
	background-image: -moz-linear-gradient($from, lighten($AccentColor, 35) 0, $BackColor 100%);
	background-image: -o-linear-gradient($from, lighten($AccentColor, 35) 0, $BackColor 100%);
	background-image: -webkit-linear-gradient($from, lighten($AccentColor, 35) 0, $BackColor 100%);
	background-image: linear-gradient(to $to, lighten($AccentColor, 35) 0, $BackColor 100%);
}

// Global layout & wireframe
html {
	background-color: lighten($AccentColor, 45);
	margin: 0;
	padding: 0;
	font: {
		family: $DefaultFont;
		size: .8em;
	}
}
body {
	margin: 0 auto;
	max-width: $MaxWidth;
	background-color: $BackColor;
	box-shadow: 0 0 $Padding*3 lighten($ForeColor, 70);
}
form {
	>header { // Site header - logo, menus etc.
		background-color: $AccentColor;
		color: $BackColor;
		div#banner { // The banner will have dynamically assigned background image of size 1200x150px
			height: 150px;
			text-align: right;
			background: { position: left top; repeat: no-repeat; }
			@media (max-width: 699px) { display: none; }
		}
		nav { // Both menus, styled as lists
			background-color: $ForeColor;
			text-transform: uppercase;
			ul {
				margin: 0;
				padding: 0;
				list-style-type: none;
				li {
					background-repeat: no-repeat;
					a {
						text-decoration: none;
						&:link, &:visited { 
							color: $BackColor; 
							&:hover {
								color: $HoverColor;
							}
						}
					}
				}
			}
			&#sitemenu { // Site menu, for login, logout and other system operations
				@media (max-width: 699px){
					padding-top: 30px;
					text-align: right;
					font-size: 80%;
					background: {
						image: url(images/fclogomobile.png);
						position: left top;
						repeat: no-repeat;
						color: $AccentColor;
					}
				}
				@media (min-width: 700px) { 
					min-height: 30px;
					line-height: 30px;
					text-align: right; 
					background: {
						image: url(images/fclogotablet.png);
						position: left center;
						repeat: no-repeat;
					}
				}
				@media (min-width: 950px) {
					background-image: url(images/fclogo.png)
				}
				li {
					display: inline-block;
					@media (min-width: 700px) {
						background-position: left center;
						padding-left: 20px;
						&.myprofile { background-image: url(images/icons/16-white/footprint.png); }
						&.mysettings { background-image: url(images/icons/16-white/tools.png); }
						&.logout { background-image: url(images/icons/16-white/close.png); }
						&.login { background-image: url(images/icons/16-white/lock.png); }
						&.regstep1 { background-image: url(images/icons/16-white/new.png); }
						&.pwresetstep1 { background-image: url(images/icons/16-white/login3.png); }
						a {
							margin-left: -20px;
							padding-left: 20px;
							padding-right: 10px;
						}
					}
					@media (max-width: 699px) {
						margin-right: 1ex;
					}
				}
			}
			&#mainmenu { // Main menu for switching between functions
				min-height: 32px;
				line-height: 32px;
				li {
					background-position: 4px center;
					font-size: 120%;
					padding-left: 32px;
					@media (max-width: 699px) { border-bottom: 1px solid $BackColor;}
					@media (min-width: 700px) { border-right: 1px solid $BackColor; display: inline-block; }
					@media (min-width: 950px) { width: 20%; max-width: $ModuleWidth - 32; }
					&.home { background-image: url(images/icons/24-white/home.png); }
					&.forum { background-image: url(images/icons/24-white/chat.png); }
					&.users { background-image: url(images/icons/24-white/footprint.png); }
					&.gallery { background-image: url(images/icons/24-white/picture.png); }
					&.blog { background-image: url(images/icons/24-white/edit.png); }
					&.mymessages { background-image: url(images/icons/24-white/mail.png); }
					&.mymessagesnew { background-image: url(images/icons/24-white/mail.png); background-color: $ComplementaryColor; }
					a {
						margin-left: -32px;
						padding-left: 32px;
						padding-right: 10px;
					}
				}
				.username { // Name of currently logged user
					float: right; 
					width: $ModuleWidth;
					text-align: center;
					border-left: 1px solid $BackColor;
					@media (max-width: 699px) { display: none; }
				}
			}
		}
	}
	>section { // This is the main content section - there is always exactly one of them
		background-image: -ms-linear-gradient(top, lighten($ForeColor, 80) 0, $BackColor 75px);
		background-image: -moz-linear-gradient(top, lighten($ForeColor, 80) 0, $BackColor 75px);
		background-image: -o-linear-gradient(top, lighten($ForeColor, 80) 0, $BackColor 75px);
		background-image: -webkit-linear-gradient(top, lighten($ForeColor, 80) 0, $BackColor 75px);
		background-image: linear-gradient(to bottom, lighten($ForeColor, 80) 0, $BackColor 75px);
		padding: $Padding;
		> aside { // This is main aside content, at time of writing used only on personal home page
			float: right;
			width: 200px;
			article {
				@include AccentGradient(bottom);
				border: 1px solid lighten($AccentColor, 35);
				margin-bottom: $Padding / 2;
				padding: $Padding / 2;
				h2 {
					font-size: 140%;
					font-weight: bold;
					margin: 0 0 1ex 0;
				}
				ul {
					margin: 1ex 0;
					padding: 0;
					li {
						margin-left: 3ex;
					}
				}
				&.userlist {
					>div{
						margin-bottom: 1ex;
						.gravatar { float: left; }
						div { 
							margin-left: 50px;
							&.username { font-size: 110%; font-weight: bold; }
							&.comment { font-size: 85%; }
						}
					}
				}
			}
		}
		.hasaside { // helper class used for content besides <aside> above
			margin-right: 200px + $Padding / 2;
		}
		.sysmsg { // Important system-wide announcement - one-line message on top of main content area (not always used)
			background-color: $ComplementaryColor; 
			color: $BackColor;
			text-align: center;
			padding: $Padding/2;
			margin-bottom: $Padding/2;
		}
	}
	>footer { // Main site footer
		clear: both;
		background-color: $ForeColor;
		color: $BackColor;
		text-transform: uppercase;
		text-align: center;
		font-size: 75%;
		padding: $Padding/5;
		border-top: 3px solid $AccentColor;
		a { 
			color: $BackColor; 
		}
	}
}

// General HTML constructs, shared trough the site
a:link {
	color: darken($AccentColor, 10);
}
a:visited {
	color: darken($AccentColor, 30);
}
a:link:hover, a:visited:hover {
	color: $ComplementaryColor;
}
@for $i from 1 to 6 {
	h#{$i} {
		@if $i == 1 { margin: 0 0 $Padding/2 0; }
		line-height: 120%;
		@media (max-width: 699px) { 
			font: { family: $HeaderFont; weight: normal; size: 100% + (6 - $i) * 10; }
		}
		@media (min-width: 700px) { 
			font: { family: $HeaderFont; weight: normal; size: 100% + (6 - $i) * 30; }
		}
		color: $AccentColor;
	}
}
img { 
	border: none; 
}
.r { 
	text-align: right;
}
.c { 
	text-align: center;
}
strong, .strong {
	font-weight: bold;
}
code, .code, .codeInline {
	font: { family: Consolas, Courier New, Courier, Monospace; size: 100%; }
}
small, .small {
	font-size: 85%;
}

// jQuery UI widget design, see http://jqueryui.com/docs/Theming
.ui-widget-content {
	border: 1px solid lighten($AccentColor, 35);
	background: $BackColor;
}
.ui-widget-header {
	@include AccentGradient(right);
	border: 1px solid lighten($AccentColor, 35);
	font-weight: bold;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
	border: 1px solid lighten($AccentColor, 35);
	background-color: lighten($ForeColor, 80);
	font-weight: normal;
}
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
	border: 1px solid $AccentColor;
	background: $HoverColor;
	font-weight: normal;
}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
	border: 1px solid lighten($AccentColor, 35);
	background: $BackColor;
	font-weight: normal;
}
.ui-widget :active {
	outline: none; 
}
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
	border: 1px solid $ComplementaryColor;
	background: $BackColor;
}
.ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error {
	border: 1px solid $ComplementaryColor;
	background: $BackColor;
	color: $ComplementaryColor;
}
.ui-priority-primary, .ui-widget-content .ui-priority-primary, .ui-widget-header .ui-priority-primary {
	font-weight: bold;
}
.ui-priority-secondary, .ui-widget-content .ui-priority-secondary, .ui-widget-header .ui-priority-secondary {
	opacity: .7;
	font-weight: normal;
}
.ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled {
  opacity: .35;
  background-image: none; 
}
.ui-widget-overlay {
  background: #000000;
  opacity: .75;
}

// Warning box
blockquote.warning {
	margin: 0 0 $Padding/2 0;
	border: 2px solid $ComplementaryColor;
	background-image: -ms-linear-gradient(top, lighten($ComplementaryColor, 55) 0, $BackColor 100%);
	background-image: -moz-linear-gradient(top, lighten($ComplementaryColor, 55) 0, $BackColor 100%);
	background-image: -o-linear-gradient(top, lighten($ComplementaryColor, 55) 0, $BackColor 100%);
	background-image: -webkit-linear-gradient(top, lighten($ComplementaryColor, 55) 0, $BackColor 100%);
	background-image: linear-gradient(to bottom, lighten($ComplementaryColor, 55) 0, $BackColor 100%);
	padding: $Padding/2;
	color: $ComplementaryColor;
	header {
		font-weight: bold;
		font-size: 125%;
		text-transform: uppercase;
	}
}

// Icon toolbar
.iconbar {
	float: right;
	a {
		display: inline-block;
		width: 24px;
		padding-top: 24px;
		background-position: middle center;
		background-repeat: no-repeat;
		text-indent: 100%;
		 white-space: nowrap;
		 overflow: hidden;
		&.rss { background-image: url(images/icons/24-black/rss.png); }
		&.bookmark-add { background-image: url(images/icons/24-black/bookmark-add.png); }
		&.bookmark-delete { background-image: url(images/icons/24-black/bookmark-delete.png); }
	}
}

// Forms
div.form {
	@include AccentGradient(right);
	border: 1px solid lighten($AccentColor, 35);
	padding: $Padding/2;

	div {
		margin-bottom: $Padding/2;
		padding: 0;
		&:nth-last-child(1) { margin: 0; }
		label {
			font-weight: bold;
		}
		aside {
			font-size: 85%;
			color: $AccentColor;
		}
	}
	.valsum ul {
		margin: 0 0 $Padding 0;
		padding: 0 0 0 $Padding;
		color: $ComplementaryColor;
		font-weight: bold;
	}
}

// Fieldsets
fieldset {
	@include AccentGradient(left);
	border: 1px solid $AccentColor;
	padding: $Padding/2;
	margin-bottom: $Padding/2;
	margin-top: $Padding;
	legend { 
		background-color: $AccentColor;
		text-transform: uppercase; 
		font-size: 100%;
		font-weight: bold;
		color: $BackColor;
		margin-top: -$Padding/2 - 6;
		margin-left: -$Padding/2 - 1;
		padding: 1px $Padding/2 1px $Padding/2;
		min-width: 25%;
	}
}


// Form elements
.textbox {
	border: 1px solid $ForeColor;
	padding: .5ex;
	width: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;   
	box-sizing: border-box;
	font: {
		family: $DefaultFont;
		size: 100%;
	}
	&[type=date] {
		width: 15ex; 
	}
}
.checklist {
	margin: .5ex 0;
	padding: 0;
	li { 
		list-style-type: none; 
		margin: 0;
		padding: 0;
	}
	label { font-weight: normal !important; }
}
.button {
	border: 1px solid $BackColor;
	background-color: $ForeColor;
	color: $BackColor;
	min-height: 30px;
	min-width: 100px;
	font: {
		family: $DefaultFont;
		size: 110%;
	}
	text-transform: uppercase;
}

// SEWEN editor toolbar
.sewen-editor-toolbar {
	border: 1px solid $ForeColor;
	border-bottom: none;
	margin-bottom: 0 !important;
	background-color: lighten($ForeColor, 80);
	padding: 4px 4px 1px 4px !important;
	.separator {
		margin-right: 1ex;
	}
	button {
		display: inline-block;
		font-size: 0;
		width: 24px;
		height: 24px;
		background-repeat: no-repeat !important;
		background-position: center center;
		margin-right: 2px;
	}
	.B         { background-image: url('images/editor/b.png') !important; }
	.I         { background-image: url('images/editor/i.png') !important;  }
	.U         { background-image: url('images/editor/u.png') !important; }
	.S         { background-image: url('images/editor/s.png') !important; }
	.Sup       { background-image: url('images/editor/sup.png') !important; }
	.Sub       { background-image: url('images/editor/sub.png') !important; }
	.H1        { background-image: url('images/editor/h1.png') !important; }
	.H2        { background-image: url('images/editor/h2.png') !important; }
	.H3        { background-image: url('images/editor/h3.png') !important; }
	.H4        { background-image: url('images/editor/h4.png') !important; }
	.H5        { background-image: url('images/editor/h5.png') !important; }
	.H6        { background-image: url('images/editor/h6.png') !important; }
	.Ul        { background-image: url('images/editor/ul.png') !important; }
	.Ol        { background-image: url('images/editor/ol.png') !important; }
	.WikiLink  { background-image: url('images/editor/wikiLink.png') !important; }
	.ExtLink   { background-image: url('images/editor/extLink.png') !important; }
	.Image     { background-image: url('images/editor/image.png') !important; }
	.CodeBlock { background-image: url('images/editor/codeBlock.png') !important; }
	.Preview   { background-image: url('images/editor/preview.png') !important; }
}

// Grid
table.grid {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: $Padding;
	td {
		border: 1px solid $AccentColor;
		padding: .75ex;
	}
	th {
		@extend td;
	}
	thead {
		background-color: lighten($AccentColor, 10);
	}
	tbody {
		tr {
			background-color: $BackColor;
			&.insert {
				background-color: lighten($AccentColor, 35);
				td {
					padding: 0;
					&.btn { 
						white-space: nowrap;
						width: 20px;
						text-align: center;
					}
				}
				.textbox {
					border: none;
					x-border: 1px solid $BackColor;
					background-color: lighten($AccentColor, 35);;
				}
			}
			&:nth-child(even) {
				background-color: lighten($AccentColor, 45);
			}
		}
	}
	tfoot td {
		margin-top: $Padding / 4;
		background-color: lighten($AccentColor, 35);
		border: 1px solid $AccentColor;
		text-align: center;
		padding: $Padding/2;
		.left { float: left; }
		.right { float: right; }
		a {
			font-weight: bold;
			&.aspNetDisabled { color: #999; }
		}
	}
}

// Details table
table.details {
	th {
		text-align: left;
	}
}

// Post/message list
section.postlist {
	// Single message
	article {
		min-height: 50px; // Height of Gravatar
		margin-top: $Padding / 4;
		border: 1px solid lighten($AccentColor, 35);
		padding: 1ex 1ex 1ex 70px;
		&:hover {
			background-color: $HoverColor;
		}
		aside {
			float: left;
			margin: 0 0 0 -60px;
		}
		header {
			@include AccentGradient(right);
			margin: -1ex -1ex 1ex -70px;
			padding: 2px 1ex 2px 70px;
			.username {
				font-weight: bold; 
				text-transform: uppercase;
				margin-right: 1ex;
				font-size: 105%;
			}
			.usercomment {
				font-size: 95%;
			}
			.more {
				float: right;
				margin-top: -1ex;
				font-size: 90%;
				a {
					margin-left: 1ex;
				}
			}
			.new {
				color: $BackColor;
				background-color: $ComplementaryColor;
				margin-right: 1ex;
				padding: 1px 1ex;
				font-size: 90%; 
				text-transform: uppercase;
			}
		}
		&.msgin .dir { font-size: 150%; color: $ComplementaryColor; }
		&.msgout .dir { font-size: 150%; color: $AccentColor; }
	}
	// Pager
	footer {
		margin-top: $Padding / 4;
		background-color: lighten($AccentColor, 35);
		border: 1px solid $AccentColor;
		text-align: center;
		padding: $Padding/2;
		.left { float: left; }
		.right { float: right; }
		a {
			font-weight: bold;
			&.aspNetDisabled { color: #999; }
		}
	}
}

// Topic list
section.topics {
	article {
		margin-bottom: $Padding/4;
		border: 1px solid lighten($AccentColor, 35);
		padding: 10px;
		&:hover {
			background-color: $HoverColor;
		}
		header {
			@include AccentGradient(right);
			margin: -10px -10px 0 -10px;
			padding: 5px 10px 0 10px;
			font-size: 125%;
			font-weight: bold;
		}
		aside {
			@include AccentGradient(right);
			font-size: 80%; 
			color: $AccentColor;
			margin: 0 -10px 10px -10px;
			padding: 0 10px 5px 10px;

			.new {
				background-color: $ComplementaryColor;
				color: $BackColor; 
				text-transform: uppercase;
				padding: 0 1ex;
			}
			.owner {
				&:before { content: 'Vlastník: '; }
				&:after { content: ', '; }
			}
			.postcount {
				&:after { content: ' příspěvků'; }
			}
			.lastpost{
				&:before { content: ', poslední '; }
			}
			.lastpostby {
				&:before { content: 'od uživatele '; }
			}
		}
	}
}

// Page-specific formatting: Forum detail
#pages_forum_detail_aspx {
	// Topic header
	ul.topicinfo {
		margin: 0;
		padding: 0;
		font-size: 80%;
		color: $AccentColor;
		li {
			display: inline;
			list-style-type: none;
			margin: 0;
			padding: 0;
			&.category:before { content: 'Kategorie: '; }
			&.owner:before { content: 'Vlastník: '; }
			&.datecreated:before { content: 'Založeno: '; }
			&.postcount:after { content: ' příspěvků, poslední '; }
			&.datecreated:before { content: 'Založeno: '; }
			&:after { content: ' |'; }
			&:last-child:after { content: none; }
		}
	}
	// Topic description
	.description {
		margin: $Padding 0;
	}
}

// Page-specific formatting: User profile
#pages_users_profile_aspx {
	hgroup {
		margin-bottom: $Padding/2;
		.species {
			text-transform: uppercase; 
			color: $AccentColor;
			font-size: 150%;
		}
		.comment {
			color: $AccentColor;
			font-size: 125%;
		}
	}
	.userpic { 
		float: left;
	}
	.description {
		@include AccentGradient(right);
		font-size: 110%;
		border: 1px solid $AccentColor;
		min-height: 150px - $Padding;
		margin-left: 150px + $Padding/2;
		padding: $Padding/2;
	}
}
